<template>
	<view class="min100" style="height: 100%;">
		<view class="">
			<view class="diamondMall_head p20 flex-between flex1" :style="{ background: bg_color}">
				<view class="">
					<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
						@click="backmarket()"></image>
				</view>
				<view class="size-30 center" :style="{opacity:textcolor}">
					{{info.name}}
				</view>
				<view class="">

					<!-- ../../static/home/aixinold.png -->
				</view>
			</view>
			<view class="topWrap  " style="">
				<image class="home_detail_bg" src="../../static/index/detail_bg.jpg" mode=""></image>

				<img :src="info.images" class="collectImg">
				<view class="autrhorinfo  radius-20  size-40 ">
					<view class="flex1 flex-between" style=";">
						<view class="" style="color: #FFF;">
							￥{{info.price}}
						</view>
					</view>
					<view class="detail_name" style="color: #000;">
						<view class="">
							{{info.name}}
						</view>
						<view class="" style="display: flex;">
							<view class="" style="display: flex;margin: 20px 20px 0 0;">
								<view class="homedetail_limit_1">
									限量
								</view>
								<view class="homedetail_limit_2">
									{{info.stock}}份
								</view>
							</view>
							<view class="" style="display: flex;margin: 20px 20px 0 0;">
								<view class="homedetail_limit_1">
									流通
								</view>
								<view class="homedetail_limit_2">
									{{info.surplus}}份
								</view>
							</view>
						</view>
					</view>
					<view class="" style="margin: 20rpx 0 0 0;">
						<image src="../../static/home/cangpingushi.png" mode="widthFix" style="width: 140rpx;">
						</image>
					</view>
					<view class="">
						<view class="">
							<view class="flex1 album_box album  relative" v-for="(item,index) in Blindboxcard">
								<!-- <view class="" style="display: flex;width: 120rpx;align-items: baseline;">
									<view class=""
										style="color: #FFF;line-height: 105px;margin: 0 0 0 0px;font-size: 11px;width: 30px;">
										总量
									</view>
									<view class="size-20" style="color: #FFF;line-height: 210rpx;">
										{{item.stock}}
									</view>
								</view> -->
								<view class="" style="position: relative;">
									<image class="" :src='item.image' mode=""
										style="width: 120rpx;height: 120rpx;z-index: -1;border-radius: 20rpx;"></image>
									<view class="ptb-5" style="display: flex;width: 100%;align-items: baseline;position: absolute;bottom: 0;justify-content: center;background: rgba(0,0,0,0.4);">
										<view class=""
											style="color: #FFF;margin: 0 0 0 0px;font-size: 11px;width: 30px;">
											总量
										</view>
										<view class="size-20" style="color: #FFF;">
											{{item.stock}}
										</view>
									</view>
								</view>
								<!-- <image class="" :src='item.image' mode=""
									style="width: 120rpx;height: 120rpx;z-index: -1;border-radius: 20rpx;"></image> -->
								<view class="flex1 flex-between ml-20" style="width: 500rpx;align-items: center;">
									<view class="">
										<view class="">
											{{item.name}}
										</view>
										<view class="size-20 mt-10 flex">
											概率 {{item.rate}}%
											<view class="ml-30">原价 ￥{{item.price}}</view>
										</view>
									</view>
									<!-- <view class="">
										<image src="../../static/my/userLogo.jpg" mode="" style="width: 100rpx;height: 100rpx;">
										</image>
									</view> -->
								</view>
							</view>
						</view>
						<view class="" style="margin: 20rpx 0 0 0;">
							<image src="../../static/home/cangpingushi.png" mode="widthFix" style="width: 140rpx;">
							</image>
						</view>
						<view class="size-22 mt-20">
							<u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse>
						</view>
						<view class="size-22 mt-20">
							<u-parse :content="buy_content" @preview="preview" @navigate="navigate"></u-parse>
						</view>
						<view class="Blockimg ">
							<image src="../../static/my/jG1.png" mode="widthFix"></image>
						</view>
					</view>

				</view>

			</view>

		</view>
		<view class="btmWrap flex pt-30 flex-between plr-30 pb-30">
			<!-- <view class="nonebtn" v-if="info.status==2">首发售空</view> -->
			<view class=" size-50 bold">
				￥{{info.price}}
			</view>
			<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
			<view class="">
				<button class="mtb-30 buyBtn" :style="btnColor" hover-class="none" @click="toBuy"
					:disabled="btnDisabled">立即购买</button>
				<!-- <view class="itemTips plr-40 ptb-8 detail_bottom_price" v-if="info.status==2">
					{{info.status_text}}
				</view> -->
			</view>
		</view>
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			 :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.images" class="collectPreImg">
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import md5Libs from "uview-ui/libs/function/md5"; //引入md5加密方式
	export default {
		components: {
			uParse,
			md5Libs
		},
		data() {
			return {
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				btnColor: {'color': '#fff','background': 'linear-gradient(to right, #686868, #161616)'},
				Blindboxcard: [],
				textcolor: '0',
				bg_color: '',
				value: 1,
				btnDisabled: false,
				preShow: false,
				id: "",
				buy_content: '',
				content: '',
				info: {}
			}
		},
		onLoad(options) {
			console.log(options);
			this.users_box_id = options.users_box_id;
			this.$http('api/trade/boxDetail', {
				users_box_id: this.users_box_id
			}).then(res => {
				this.info = res;
				console.log(this.info);
				console.log(this.info.is_self)
				this.Blindboxcard = this.info.goods
				console.log(this.Blindboxcard);
				this.content = res.content
				this.buy_content = res.buy_content
				if(this.info.is_self == true){
					this.btnDisabled = true;
					this.btnColor = {'color': '#999','background': '#eee'}
				}
			})
			
		},
		onShow() {

		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			// 品牌方
			goBrandside() {
				// uni.navigateTo({
				// 	url: "/pages/home/detailBrandside"
				// })
			},
			// 创作者
			goCreator() {
				// uni.navigateTo({
				// 	url: "/pages/home/homeCreator"
				// })
			},
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '区域链地址复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '区域链地址复制成功!',
							icon: 'none'
						});
					},

				);
				// #endif
			},
			// 开盒子记录
			goboxtext() {
				uni.navigateTo({
					url: '../home/homeboxtext'
				})
			},
			// 回退首页
			gobackhome() {
				uni.navigateBack({
					url: '../home/index'
				})
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value)
			},
			handlePre() {
				uni.navigateTo({
					url: './homeShow?url=' + this.info.model_url
				})
			},
			// 预览图片
			toBuy() {
				this.btnDisabled = true;
				this.btnColor = {'color': '#999','background': '#eee'},
				this.$http('api/user/isTradePass', {}).then(res => {
					if (res.is_trade == 0) { //判断是否设置过密码
						console.log('去设置密码')
						uni.showModal({
							title: '提示',
							content: '还未设置密码，去设置密码',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: './password'
									});
								} else if (res.cancel) {}
							}
						});
					} else if (res.is_trade == 1) {
						this.showKeyboard = true;
						this.password = ''; //唤醒输入组件时清空密码
						
					}
				})
			},
			finish() {
				const md5 = md5Libs.md5;
				this.$http('api/user/checkTradePass', {
					pass: this.password
				}).then(res => {
					if (res.is_check == 0) {
						uni.showToast({
							title: "密码错误",
							icon: 'none'
						})
						return;
					} else if (res.is_check == 1) {
						
						this.$http('api/user/userInfo').then(res => {
							if(res.is_heepay_auth == 0){
								uni.showToast({
									icon:"none",
									title:'请先开通钱包'
								})
							}else{
								var time = Date.parse(new Date()).toString(); //精确到毫秒
								time = time.substr(0, 10); //精确到秒
								this.$http('api/orders/tradeBox', {
									users_box_id: this.users_box_id,
									// num: this.value
									time: time,
									pay_password: md5(`${this.password}`),
									// sign: md5(`${this.id}${md5(`${time}`)}${this.password}`),
									sign: md5(this.users_box_id+time+md5(`${this.password}`))
								},'POST').then(res => {
									this.btnDisabled = false;
									console.log(res);
									uni.navigateTo({
										url: '../pay/collectPaybox?order_id=' + res.order_id
									})
								})
							}
							
						});
						
						
					}
				});
				this.showKeyboard = false;
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.detail_bottom_price {
		width: 490rpx;
		height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 70rpx;
		color: #FFF;
		border-radius: 15rpx;
	}

	.Blockimg {
		text-align: center;
		padding-bottom: 160rpx;

		image {
			width: 320rpx;
		}
	}

	.purchase {
		color: #5C5C5C;
		font-size: 22rpx;
	}

	.album_box {
		// border-bottom: 2rpx solid #EBEBEB;
		height: 100rpx;
	}

	.album_box1 {
		height: 60rpx;
		margin: 20rpx 0 0 0;
	}

	.album {
		color: #000;
		width: 690rpx;
		height: 160rpx;
		border: 2rpx solid #EBEBEB;
		border-radius: 20rpx;
		margin: 0rpx 0 16rpx -16rpx;
		font-size: 27rpx;
		padding: 20rpx;

	}

	.honmedetail_three {
		color: #000;
		width: 330rpx;
		height: 130rpx;
		border: 2rpx solid #EBEBEB;
		border-radius: 20rpx;
		margin: 30rpx 0 0 -30rpx;
		font-size: 27rpx;
		padding: 20rpx;
	}

	.homedetail_limit_1 {
		width: 100rpx;
		height: 40rpx;
		background-color: #F5BA76;
		text-align: center;
		line-height: 40rpx;
		font-weight: 500;
		// font-family: cursive;
		font-size: 26rpx;
	}

	.homedetail_limit_2 {
		// width: 100rpx;
		height: 40rpx;
		background-color: #F9EFE5;
		text-align: center;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #AB6E28;
		padding: 0 6rpx;
	}

	.detail_name {
		background-color: #FFF;
		color: rgb(0, 0, 0);
		width: 690rpx;
		height: 200rpx;
		border-radius: 22rpx;
		margin: 20rpx 0 0 -30rpx;
		padding: 24rpx;
		font-size: 30rpx;
		border: 1px solid #EBEBEB;
	}

	.flex_around {
		display: flex;
		justify-content: space-around;
	}

	.flex_between {
		display: flex;
		justify-content: space-between;
	}

	.flex {
		display: flex;
	}

	.home_detail_bg {
		width: 100%;
		// height: 950rpx;
		height: 91%;
		position: absolute;
		left: 0;
		top: -40rpx;
		z-index: -1;

	}

	.userImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.buyBtn {
		font-size: 28rpx;
		// color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		width: 450rpx;
		// background: #59AAFF;
		background: linear-gradient(to right, #686868, #161616);
		color: #FFF;
	}


	.copyImg {
		width: 24rpx;
		height: 24rpx;
	}

	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;

		.nonebtn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: rgba(#714aed, .4);
			margin: 0 auto;
			text-align: center;
			color: #fff;
		}
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 86%;
		display: block;
		margin: 0px auto;
		height: auto;
		position: relative;
		border-radius: 7%;
		top: 160rpx;
		border: 20rpx solid #FFF;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.topWrap {
		// padding-top: 120rpx;
		// background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		// background-color: #FFF;
		width: 100%;
		position: relative;

		.autrhorinfo {
			width: 92%;
			background-color: #FFF;
			margin: 180rpx auto;
			background-image: linear-gradient(to right, #636363, #2B2B2B);
			height: 270rpx;
			padding: 30rpx;


		}
	}


	.infoWrap {
		color: #fff;

		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		// border-radius: 40rpx;
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
</style>
